Nested Lists তৈরি করা গাইড ও নোট

HTML5 এ Nested Lists হলো এমন তালিকা যেখানে একটি লিস্টের ভেতরে অন্য একটি লিস্ট থাকে। Nested Lists তৈরি করতে আমরা Unordered List (<ul>) এবং Ordered List (<ol>) একসাথে বা পৃথকভাবে ব্যবহার করতে পারি। এটি ডাটা বা আইটেমকে আরও বিস্তারিত এবং গঠনমূলকভাবে উপস্থাপন করতে সহায়ক।

Nested Lists এর উদাহরণ

উদাহরণ ১: Nested Unordered List

<ul>
    <li>Frontend Development
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </li>
    <li>Backend Development
        <ul>
            <li>Node.js</li>
            <li>Python</li>
            <li>PHP</li>
        </ul>
    </li>
</ul>

ব্যাখ্যা:

• উপরের উদাহরণে একটি প্রধান Unordered List (<ul>) তৈরি করা হয়েছে, যার দুটি প্রধান আইটেম: Frontend Development এবং Backend Development।
• প্রতিটি প্রধান আইটেমের মধ্যে আরেকটি Unordered List রয়েছে, যেখানে Frontend Development এর মধ্যে HTML, CSS, এবং JavaScript উল্লেখ করা হয়েছে এবং Backend Development এর মধ্যে Node.js, Python, এবং PHP উল্লেখ করা হয়েছে।

উদাহরণ ২: Nested Ordered List

<ol>
    <li>Preparation
        <ol>
            <li>Gather Ingredients</li>
            <li>Preheat Oven</li>
        </ol>
    </li>
    <li>Cooking
        <ol>
            <li>Mix Ingredients</li>
            <li>Bake for 20 minutes</li>
        </ol>
    </li>
    <li>Serving
        <ol>
            <li>Let it cool</li>
            <li>Cut into slices</li>
        </ol>
    </li>
</ol>

ব্যাখ্যা:

• এখানে একটি Ordered List (<ol>) তৈরি করা হয়েছে, যেখানে তিনটি প্রধান ধাপ রয়েছে: Preparation, Cooking, এবং Serving।
• প্রতিটি প্রধান ধাপের অধীনে একটি Nested Ordered List রয়েছে, যা সেই ধাপের বিস্তারিত নির্দেশনা দেয়।

উদাহরণ ৩: Mixed Nested List (Unordered এবং Ordered একত্রে)

<ul>
    <li>Programming Languages
        <ol>
            <li>Python</li>
            <li>JavaScript</li>
        </ol>
    </li>
    <li>Frameworks
        <ul>
            <li>Frontend
                <ul>
                    <li>React</li>
                    <li>Angular</li>
                </ul>
            </li>
            <li>Backend
                <ul>
                    <li>Express</li>
                    <li>Django</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

ব্যাখ্যা:

• উপরের উদাহরণে, Unordered এবং Ordered List মিশ্রিত করে একটি Nested List তৈরি করা হয়েছে।
• Programming Languages এর অধীনে একটি Ordered List ব্যবহার করা হয়েছে, এবং Frameworks এর অধীনে আরও দুটি Nested Unordered List ব্যবহার করা হয়েছে, যেখানে Frontend এবং Backend এর ফ্রেমওয়ার্কগুলো উল্লেখ করা হয়েছে।

Nested Lists এর সঠিক ব্যবহার

• গঠনমূলক তথ্য প্রদর্শন: Nested Lists ব্যবহার করে তথ্য বা আইটেমগুলোকে গঠনমূলকভাবে বিভক্ত করা যায়, যাতে প্রতিটি স্তর একটি নির্দিষ্ট তথ্যের গ্রুপকে উপস্থাপন করে।
• বিভিন্ন লিস্ট টাইপ মিশ্রণ: Unordered এবং Ordered List একত্রে ব্যবহার করে Nested Lists তৈরি করা যায়, যা তথ্যের ভিন্ন স্তর বা ক্রম নির্দেশ করতে সহায়ক।
• CSS দিয়ে কাস্টমাইজেশন: CSS ব্যবহার করে Nested Lists এর স্টাইল, বুলেট টাইপ, মার্জিন, প্যাডিং ইত্যাদি কাস্টমাইজ করা যায়, যাতে Nested Lists দেখতে আরও আকর্ষণীয় হয়।

CSS দিয়ে Nested List কাস্টমাইজেশন

<style>
    ul, ol {
        margin: 10px;
        padding-left: 20px;
    }
    ul ul {
        list-style-type: circle; /* দ্বিতীয় লেভেলের জন্য গোলাকার বুলেট */
    }
    ol ol {
        list-style-type: lower-alpha; /* দ্বিতীয় লেভেলের জন্য ছোট অক্ষর */
    }
</style>

<ul>
    <li>Frontend Development
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </li>
    <li>Backend Development
        <ol>
            <li>Node.js</li>
            <li>Python</li>
            <li>PHP</li>
        </ol>
    </li>
</ul>

ব্যাখ্যা:

• CSS এর মাধ্যমে <ul> এবং <ol> এর মার্জিন এবং প্যাডিং কাস্টমাইজ করা হয়েছে।
• Nested Unordered List (<ul>) এর জন্য বুলেট টাইপ পরিবর্তন করে circle করা হয়েছে, এবং Nested Ordered List (<ol>) এর জন্য lower-alpha স্টাইল (a, b, c) ব্যবহার করা হয়েছে।